<template>
  <n-card class="min-w-200 w-30%">
    <div class="flex items-center">
      <n-avatar round :size="60" :src="userStore.avatar" class="flex-shrink-0" />
      <div class="ml-20 flex-col">
        <span class="text-20 opacity-80">
          Hello, {{ userStore.nickName ?? userStore.username }}
        </span>
        <span class="mt-4 opacity-50">当前角色：{{ userStore.currentRole?.name }}</span>
      </div>
    </div>
    <p class="mt-28 text-14 opacity-60">
      "得不到的永远在骚动，被偏爱的都有恃无恐" —— 《红玫瑰》陈奕迅
    </p>
  </n-card>
</template>

<script setup>
import { useUserStore } from '@/store'

const userStore = useUserStore()
</script>
